<template>
    <div class="moments-list" v-if="moments.length > 0">
        <div class="moments-content">
            <div class="monents-row">
                <div class="moments-header">
                    <i class="fas fa-comment-dots"></i>
                    <span>最新说说:</span>
                </div>
                <transition name="fade" mode="out-in">
                    <div class="moment-item" :key="currentIndex">
                        <span class="moment-text" @click="goToMoments" v-html="moments[currentIndex].content" />
                    </div>
                </transition>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const moments = ref([])
const currentIndex = ref(0)
const timer = ref(null)

// 获取说说列表的函数
const getMomentsList = async () => {
  // const res = await getMoments({ pageSize: 5, pageNum: 1 });
  // if (res.data && res.data.records) {
  //   moments.value = res.data.records;
  //   startRotation();
  // }
  //   moments.value = ['']
};

// 跳转到说说页面的函数
const goToMoments = () => {
  // 这里假设使用 vue-router
//   const { useRouter } = VueRouter;
//   const router = useRouter();
//   router.push('/moments');
};

// 开始轮播的函数
const startRotation = () => {
  // if (timer.value) {
  //   clearInterval(timer.value);
  // }
  // timer.value = setInterval(() => {
  //   currentIndex.value = (currentIndex.value + 1) % moments.value.length;
  // }, 4000); // 每4秒切换一次
};

// 模拟 created 钩子
getMomentsList();

// 模拟 mounted 钩子
onMounted(() => {
  startRotation();
});

// 模拟 beforeDestroy 钩子
onBeforeUnmount(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});


</script>

<style lang="scss" scoped>
.moments-list {
  background: var(--card-bg);
  border-radius: $border-radius-lg;
  padding: $spacing-md $spacing-lg;
  margin-bottom: $spacing-xl;
  box-shadow: $shadow-sm;
}

.moments-content{
    .moments-row{
        display: flex;
        align-items: center;
        gap: $spacing-sm;
    }
}

.moments-header{
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;

    i{
        color: $primary;
        font-size: 1.2em;
    }
}
.moment-item {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  max-height: 20px;
  overflow: hidden;
  .moment-text {
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    cursor: pointer;
    &:hover {
      color: $primary;
    }
  }
}

// 添加过渡动画样式
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  transform: translateY(0);
}
</style>